<template>
    <view class="box">
        <view class="flex_wrap row_between row_middle">
            <view class="flex_wrap" @click="toAdvisor()">
                <u-icon
                    :name="
                        avatar ||
                        'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2022/09/26/fc37e69dde1544b4a1f1897f5520d486.png'
                    "
                    size="68rpx"
                    :label="salesmanName"
                    labelSize="34rpx"
                    labelColor="#171717"
                    space="20rpx"
                />
                <u-text
                    :text="'阅读量' + useInterests.heatValue"
                    size="28rpx"
                    color="#AAA"
                    margin="0 0 0 26rpx"
                />
            </view>
            <u-icon
                name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/1b16abcefdfd42f48dbf5e7c15e258d7.png"
                size="32rpx"
                label="分享"
                labelSize="28rpx"
                labelColor="#1783F8"
                space="4rpx"
                @click="QRcodeFun()"
            />
        </view>
        <view>
            <view
                style="
                    padding: 30rpx 0 10rpx 0;
                    font-weight: 400;
                    font-size: 48rpx;
                    color: #161616;
                "
                >{{ useInterests.videoIntro }}</view
            >
            <view
                class="flex_wrap"
                style="flex-wrap: wrap"
                v-if="useInterests.tag && useInterests.tag.length"
            >
                <text
                    style="
                        padding: 0 10rpx 0 0;
                        font-weight: 400;
                        font-size: 32rpx;
                        color: #588bf3;
                    "
                    v-for="item in useInterests.tag"
                    @click="openList(item)"
                    >#{{ item }}</text
                ></view
            >
        </view>
        <!-- <u-text
            :text="useInterests.videoIntro"
            size="48rpx"
            bold
            color="#161616"
            margin="48rpx 0 16rpx"
        /> -->
        <u-gap height="24rpx" />
        <view class="flex_wrap row_middle">
            <view>
                <u-text
                    :text="
                        $u.timeFormat(
                            useInterests.uploadTime,
                            'yyyy-mm-dd hh:MM'
                        ) + '发布'
                    "
                    size="32rpx"
                    color="#AAAAAA"
                />
            </view>
            <text class="total">达人资讯</text>
        </view>

        <view class="wrap">
            <view v-for="item in dataList" :key="item.id">
                <u-text
                    margin="16px 0"
                    :text="item.text"
                    :key="item.id"
                ></u-text>
                <image
                    v-for="(e, i) in item.img"
                    :src="e.url"
                    mode="widthFix"
                    :key="i"
                ></image>
            </view>
        </view>
		<!-- 评论 -->
		<view class="comment">
			<u-text
			    text="评论"
			    size="28rpx"
			    color="#3D3D3D"
			/>
			<u-gap height="24rpx" />
			<u-input
			    placeholder="写下你的观点..."
			    border="surround"
			    v-model="commentValue"
			    @change="change"
				@blur="handleBlur"
				:customStyle="{
					background: '#F7F7F7',
					borderRadius: '8rpx',
					height: '86rpx',
					color:'#AAAAAA'
				}" 
				:placeholderStyle="{
					fontSize: '28rpx',
					color: '#aaa',
				}"
			/>
			<u-gap height="34rpx" />
			<view class="comment_detail" v-for="item in reviewList" :key="item.id">
				<u-text :text="item.customerName" color="#777777" size="28rpx"
					iconStyle="margin-right:16rpx;width:60rpx;height:60rpx;border-radius:60rpx;"
					:prefixIcon="item.customerProfilePicture || '/static/img/conference/MissingAvatar.png'" />
				<view class="comment_details">
					<u-text
					    :text="item.reviewInfo"
					    size="32rpx"
					    color="#181818"
					/>
					<u-gap height="16rpx" />
					<u-text
					    :text="$u.timeFormat(
                            item.createTime,
                            'yyyy/mm/dd'
                        )"
					    size="24rpx"
					    color="#AAAAAA"
					/>
				</view>
			</view>
		</view>
		
        <u-popup
            :show="showQR"
            mode="center"
            @close="showQR = false"
            @touchmove.stop.prevent="() => {}"
        >
            <view>
                <u--image
                    :src="showImgData"
                    width="200px"
                    height="200px"
                ></u--image>
                <u-text
                    text="长按二维码即可分享"
                    size="32rpx"
                    color="#333"
                    margin="26rpx 0 0"
                    align="center"
                />
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { baseUrl } from "@/config/tendIdConfig";
import { nouserCard,listReview ,addReview} from "@/api/card.js";
export default {
    data() {
        return {
            dataList: [],
            value: "",
            value1: "",
            value2: "",
            fileList: [],
            fileList1: [],
            fileList2: [],
            useInterests: {},
            showQR: false,
            showImgData: "",
            avatar: "",
            salesmanName: "",
            salesManId: "",
			commentValue:'',
			reviewList:[]
        };
    },
    onLoad(options) {
        this.id = decodeURIComponent(options.id);
        this.getDetailInfo(this.id);
		this.getReviewList()
    },
    methods: {
		async getReviewList(){
			const params = {
				pageNum: 1,
				pageSize: 100,
				reviewFromRecordsId:this.id
			};
			const reviewList = await listReview(params);
			this.reviewList = reviewList.data.rows
		},
		async handleBlur(event) {
			this.commentValue = event;
			 console.log(event,'value>>>')
			 
			if ( this.commentValue.length ) {
				const params = {
					reviewInfo: this.commentValue,
					reviewFromRecordsId:this.id
				};
				const res = await addReview(params);
				this.getReviewList()
			}
		},
		
		
        getDetailInfo(id) {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url:
                    baseUrl +
                    "/customer/video_info_customer/open/getVideoByIdNoToken/" +
                    id,
                method: "GET",
                header: {
                    Authorization: token,
                },
                success(res) {
                    that.useInterests = res.data.data;
                    const list = JSON.parse(res.data.data.infoDetail);
                    if (that.useInterests.tag)
                        that.useInterests.tag = that.useInterests.tag
                            .split(",")
                            .filter((ele) => ele && ele !== " ");
                    that.dataList = list;
                    that.value = list[0]?.text ?? "";
                    that.fileList = list[0]?.img
                        ? list[0]?.img.map((v) => ({ url: v.url }))
                        : [];
                    that.value1 = list[1]?.text ?? "";
                    that.fileList1 = list[1]?.img
                        ? list[1]?.img.map((v) => ({ url: v.url }))
                        : [];
                    that.value2 = list[2]?.text ?? "";
                    that.fileList2 = list[2]?.img
                        ? list[2]?.img.map((v) => ({ url: v.url }))
                        : [];

                    that.getImproveReading(id);
                    that.getSalesmanInfo();
                },
            });
        },
        async getSalesmanInfo() {
            const result = await nouserCard(this.useInterests.releaseManId);
            this.salesmanName = result.data.salesmanName;
            this.avatar = result.data.avatar;
            this.salesManId = result.data.id;
        },
        // 标签
        openList(tag) {
            this.$u.route({
                url: "/pages_consultation/counsellings/index",
                params: {
                    styleFirstNum: 2,
                    tag,
                },
            });
        },
        toAdvisor() {
            setTimeout(() => {
                uni.navigateTo({
                    url:
                        "/pages_card/user_card/index?salesmanId=" +
                        this.salesManId,
                });
            }, 500);
        },
        getImproveReading(id) {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url:
                    baseUrl +
                    "/customer/video_info_customer/improveReading/" +
                    id,
                method: "GET",
                header: {
                    Authorization: token,
                },
                success(res) {
                },
            });
        },

        QRcodeFun() {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url: baseUrl + "/customer/wx/qrcode/genWxMpQrCode",
                method: "POST",
                data: {
                    scene: 0,
                    sceneId: that.useInterests.id,
                },
                header: {
                    Authorization: token,
                },
                success(res) {
                    if (res.data.code == 200) {
                        that.showQR = true;
                        that.showImgData = res.data.data.qrCodeUrl;
                    }
                },
            });
        },
        onShareTimeline: function () {
            let that = this;
            return {
                title: that.useInterests.videoIntro,
                query: {
                    id: that.useInterests.id,
                    styleFirstNum: that.styleFirstNum,
                },
                imageUrl: that.useInterests.videoCover,
            };
        },
        onShareAppMessage: function () {
            // uni-app 会自动处理分享
            let that = this;
            // 返回数据
            return {
                title: that.useInterests.videoIntro,
                imageUrl: that.useInterests.videoCover,
                path:
                    "pages_consultation/counsellings/detailsSalesman?id=" +
                    that.useInterests.id,
            };
        },
    },
};
</script>

<style scoped lang="scss">
.box {
    padding: 24rpx 48rpx 60rpx;
}

.total {
    width: 136rpx;
    height: 40rpx;
    background: #1783f8;
    border-radius: 10rpx 10rpx 10rpx 0;
    line-height: 40rpx;
    text-align: center;
    font-size: 28rpx;
    color: #ffffff;
    margin-left: 36rpx;
}
.wrap {
    padding: 30rpx 0 52rpx;
    // height: calc(100vh - 88rpx);
    // overflow-y: scroll; // 超出滚动
    // overscroll-behavior: none; // 禁止滚动溢出
}
.comment_detail{
	border-bottom: 1rpx solid #DCDCDC;
	padding-bottom: 32rpx;
	margin-bottom: 32rpx;
}
.comment_details{
	padding-left: 76rpx;
}
</style>
